<template>
	<view class="box" style="height: 100vh;">
		<view class="">
			<image src="/static/home/topImg.png" class="topImg" mode=""></image>
			<view class="topZhan" style="height: 88px;border-bottom: 2rpx solid rgba(0,0,0,0.1);"></view>
			<view class="body">
				<view class="topTab f f-j-c">
					<view @click="goZuowen" class="zuowen w f f-a-c f-j-c">
						作文任务
					</view>
					<view @click="goTing" class="tingxie w f f-a-c f-j-c">
						听写任务
					</view>
					<view @click="goMoxie" class="moxie w f f-a-c f-j-c">
						默写任务
					</view>
				</view>
				<!-- <button @click="goreaet">去听写报告页面</button> -->
				<view class="title">
					<image src="/static/home/bgText.png" class="icon" mode=""></image>
					<text style="position: absolute;z-index: 3;margin-left: -50rpx;margin-top: 10rpx;">今日任务</text>
				</view>
				<view v-for="(item,index) in list" :key="index" style="background-color: #fff;"
					class="huang box f f-j--a-c f-j-c">
					<view v-if="item.taskType=='composition'" class="biao f f-a-c f-j-c">
						作文
					</view>
					<view v-else-if="item.taskType=='dictate'" class="biao2 f f-a-c f-j-c">
						听写
					</view>
					<view v-else class="biao3 f f-a-c f-j-c">
						默写
					</view>
					<view class="bodyWen f f-d-c f-j-c">
						<view class="ban">
							{{item.className}} &nbsp;&nbsp;&nbsp;&nbsp;
							{{$u.timeFormat(item.createTime, 'mm月dd日')}}-{{item.className}}-{{item.taskType=='composition'?'作文':item.taskType=='dictate'?'听写':'默写'}}

						</view>
						<view class="ban">
							{{$u.timeFormat(item.createTime, 'yyyy.mm.dd. hh:MM:ss')}}
						</view>
					</view>
					<view class="ok"
						:class="{act:item.taskStatus==1,red:item.taskStatus==0,cheng:item.taskStatus==3,red:item.taskStatus==2,red:item.taskStatus==4}">
						{{item.taskStatus==0?'待扫描':item.taskStatus==1?'批改中':item.taskStatus==2?'待审阅':item.taskStatus==3?'完成':'失败'}}
					</view>
					<!-- v-if="item.taskStatus==2||item.taskStatus==3" -->
					<view @click="goReacut(item.taskId,item)" v-if="item.taskStatus==2||item.taskStatus==3"
						class="chakan f f-a-c f-j-c">
						查看
					</view>
				</view>

				<view v-if="list.length==0" class="f f-a-c f-j-c"
					style="height: 200rpx;width: 100%;color: #ccc;font-size: 32rpx;">
					暂无内容
				</view>
				<view class="title" style="margin-top: 50rpx;">
					<image src="/static/home/bgText.png" class="icon" mode=""></image>
					<text style="position: absolute;z-index: 3;margin-left: -50rpx;margin-top: 10rpx;">百宝箱</text>
				</view>
				<view class="bottonbai f f-a-c f-j-b">
					<view class="left f f-a-c f-j-c">
						<image src="/static/home/shou.png" class="wenjian" mode=""></image>
						<view class="">
							作文收藏
						</view>
					</view>
					<view @click="goZiYuan" class="right f f-a-c f-j-c">
						<image src="/static/home/ziyuan.png" class="wenjian" mode=""></image>
						<view class="">
							资源库
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageList: [],
				list: [],
				services: []
			}
		},
		onShow() {
			let token = uni.getStorageSync('token')
			console.log('56565655656565655656');
			if (!token) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
				return
			}
			this.infoHome()
			// 写死缓存
			// uni.setStorageSync('phone', '19956841176')
			// uni.setStorageSync('schoolId', '205253192831864832')
			// uni.setStorageSync('teacherId', '205527415743713280')
			// uni.setStorageSync('teacherName', '刘老师')
			// uni.setStorageSync('authCode', '123')
			this.init()
			// this.loigin()
		},
		onPullDownRefresh() {
			// 这里写你的刷新逻辑
			console.log('下拉刷新触发');
			this.init()
			// // 模拟异步请求
			setTimeout(() => {
				// 停止下拉刷新动画
				uni.stopPullDownRefresh();
			}, 2000);
		},
		methods: {
			async infoHome() {
				let n = await this.$api.wechatInfo({
					schoolId: uni.getStorageSync('schoolId'),
					teacherId: uni.getStorageSync('teacherId'),
				})
				this.services = n.data.services.split(',')
			},
			// 去报告页
			goreaet() {
				uni.navigateTo({
					url: '/pages/index/zuowen/correcting'
				})
			},
			// 去资源库
			goZiYuan() {
				uni.navigateTo({
					url: '/pages/utils/resourceLibrary'
				})
			},
			// 模拟登录
			async loigin() {

				if (phone.length) {
					return
				}
				let n = await this.$api.zhuCe({
					"phone": "19956841176",
					"name": "lzl",
					"authCode": "123",
					"unionId": "123"
				})
				if (n.code == "0000") {
					const bigNum = BigInt(n.data.schoolId);
					console.log(bigNum.toString(), '6666666666666666');
					uni.setStorageSync('authCode', n.data.authCode)
					uni.setStorageSync('phone', n.data.phone)
					uni.setStorageSync('schoolId', n.data.schoolId)
					uni.setStorageSync('teacherId', n.data.teacherId)
					uni.setStorageSync('teacherName', n.data.teacherName)
					uni.setStorageSync('wexinUnionid', n.data.wexinUnionid)
				}
			},
			// 去学生列表
			goReacut(taskId, item) {
				if (item.taskType == 'dictation') {
					// 默写
					uni.navigateTo({
						url: '/pages/index/moxie/resultsMoXie?taskId=' + taskId
					})
				} else if (item.taskType == 'dictate') {
					// 听写
					uni.navigateTo({
						url: '/pages/index/tingxie/results?taskId=' + taskId
					})
				} else {
					// 作文
					uni.navigateTo({
						url: '/pages/index/zuowen/compositionList?taskId=' + taskId
					})
				}

			},
			// 获取今日任务
			async init() {
				let n = await this.$api.today({
					teacherId: uni.getStorageSync('teacherId')
					// teacherId: '205527415743713280'
				})
				this.list = n.data
			},
			goTing() {
				if (!this.services.includes('dictate')) return this.$msg('暂未开通本套餐')
				uni.navigateTo({
					url: '/pages/index/tingxie/dictation'
				})
			},
			goZuowen() {
				if (!this.services.includes('composition')) return
				uni.navigateTo({
					url: '/pages/index/zuowen/composition'
				})
			},
			goMoxie() {
				if (!this.services.includes('dictation')) return this.$msg('暂未开通本套餐')
				uni.navigateTo({
					url: '/pages/index/moxie/compositionTas'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		position: relative;
		z-index: 9;
		height: calc(100vh - 88px);
		width: 100%;
		padding: 30rpx;
		overflow-y: auto;
		// background-color: pink;
	}

	.body::-webkit-scrollbar {
		width: 0;
		/* 滚动条宽度 */
	}

	.bottonbai {
		margin-top: 40rpx;

		.left {
			width: 48%;
			background: #FDE5E5;
			border-radius: 20rpx;
			height: 112rpx;
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: 400;
			font-size: 32rpx;
			color: #CF233C;

			.wenjian {
				width: 64rpx;
				height: 58rpx;
				margin-right: 20rpx;
			}
		}

		.right {
			width: 48%;
			height: 112rpx;
			background: #CAF1C5;
			border-radius: 20rpx;
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: 400;
			font-size: 32rpx;
			color: #2A7C27;

			.wenjian {
				width: 64rpx;
				height: 58rpx;
				margin-right: 20rpx;
			}
		}
	}

	.chakan {
		position: absolute;
		bottom: 8rpx;
		right: 10rpx;
		width: 92rpx;
		height: 40rpx;
		background: #05C490;
		border-radius: 10rpx;
		font-family: SourceHanSansCN, SourceHanSansCN;
		font-weight: 400;
		font-size: 22rpx;
		color: #FFFFFF;
	}

	.ok {
		position: absolute;
		right: 10rpx;
		top: 5rpx;
		font-family: "SourceHanSansCN, SourceHanSansCN";
		font-weight: 400;
		font-size: 22rpx;
		// color: #4E95FF;
	}

	.ok.act {
		color: #FF6000;
	}

	.ok.red {
		color: #FF2819;
	}

	.ok.cheng {
		color: #4E95FF;
	}

	.bodyWen {
		.ban {
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
		}
	}

	.huang {
		margin-top: 50rpx;

		.biao {
			position: absolute;
			width: 118rpx;
			height: 46rpx;
			top: -10rpx;
			left: -10rpx;
			background: url('/static/home/huang.png') no-repeat center center;
			background-size: 100% 100%;
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
		}

		.biao2 {
			position: absolute;
			width: 118rpx;
			height: 46rpx;
			top: -10rpx;
			left: -10rpx;
			background: url('/static/home/lan.png') no-repeat center center;
			background-size: 100% 100%;
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
		}

		.biao3 {
			position: absolute;
			width: 118rpx;
			height: 46rpx;
			top: -10rpx;
			left: -10rpx;
			background: url('/static/home/zi.png') no-repeat center center;
			background-size: 100% 100%;
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}

	.box {
		position: relative;
		height: 176rpx;
		// background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 16rpx;
	}

	.title {
		display: inline;
		// position: relative;
		font-family: SourceHanSansCN, SourceHanSansCN;
		font-weight: bold;
		font-size: 32rpx;
		color: #000000;
		z-index: 2;
		margin-bottom: 24rpx;

		.icon {
			position: relative;
			width: 64rpx;
			height: 24rpx;
			top: 13rpx;
			z-index: 0;
			left: 50rpx;

		}
	}

	.topTab {
		height: 316rpx;
		width: 100%;
		align-items: flex-end;
		margin-bottom: 40rpx;

		.w {
			width: 188rpx;
			height: 230rpx;
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;

		}

		.zuowen {
			background: url('/static/home/1.png') no-repeat center center;
			background-size: 100% 100%;
		}

		.tingxie {
			background: url('/static/home/2.png') no-repeat center center;
			background-size: 100% 100%;
			margin: 0 30rpx;
		}

		.moxie {
			background: url('/static/home/3.png') no-repeat center center;
			background-size: 100% 100%;
		}
	}

	.topImg {
		position: fixed;
		z-index: 1;
		width: 100%;
		height: 492rpx;
		top: 0;
		left: 0;
	}
</style>